<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<html>
<head>
    <title>异步提交商品</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"></script>
</head>
<body>
<h1>异步提交商品</h1>
<form id="products">
    <table>
        <tr>
            <th>商品Id</th>
            <th>商品名称</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input id="id" type="text" name="id" value="1"></td>
            <td><input id="name" type="text" name="name" value="苹果"></td>
            <td><input type="button" value="提交" onclick="submitProduct()"></td>
        </tr>
        <tr>
            <td><input id="id1" type="text" name="id1" value="2"></td>
            <td><input id="name1" type="text" name="name1" value="香蕉"></td>
            <td><input type="button" value="提交" onclick="submitProducts()"></td>
        </tr>
    </table>
</form>
<script type="text/javascript">    
    function submitProducts() {
        let data=JSON.stringify([{id: $("#id").val(),name: $("#name").val()},{
            id: $("#id1").val(),
            name: $("#name1").val()
        }])

        $.ajax({
            url: "${pageContext.request.contextPath}/getProductList",
            type: "post",
            contentType: "application/json;charset=UTF-8",
            data: data,
            success: function (data) {
                alert(data);
            }
        })
    }

    function submitProduct() {
        let data=JSON.stringify({
            id: $("#id").val(),
            name: $("#name").val()
        })

        $.ajax({
            url: "${pageContext.request.contextPath}/getProduct",
            type: "post",
            contentType: "application/json;charset=UTF-8",
            data: data,
            success: function (data) {
                alert(data);
            }
        })
    }

</script>

</body>
</html>
